<!-- 瀑布流布局 -->
<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">

		<template #top>
			<view>
				<view class="seach">
					<searchs :istopage="false" @search="search" />
				</view>


				<view class="tabs xflex-x-around xpb24">
					<view class="tabsItem xflex-x" v-for="(item,index) in detail.typelist" :key="index">
						<view class="tabsItemname" @click="onTypeActive(index +1)"
							:class="detail.typeActive == index +1?'tabsItemnameActive':''">
							{{item.name}}
						</view>

					</view>


				</view>
			</view>
		</template>


		<view class="img">
			<view class="img-tip pr" v-for="(item,index) in dataList" :key="index" @click="play(item)">
				<image class="img-tips" :src="item.image" mode="widthFix" lazy-load />

				<image class="pa bf" src="../../static/image/img/bf.png" mode=""></image>



			</view>
		</view>

		<video v-show="isOpenVideo" controls id="myvideo" :src="imgs" @fullscreenchange="fullscreenchange"></video>

	</z-paging>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import searchs from '@/components/search/searchs.vue'
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		videolists,
		accesstypec
	} from "@/network/home.js"

	let isOpenVideo = ref(false)
	let imgs = ref('')
	let videoContext = ref('')

	const play = (data) => {


		let videoContext = uni.createVideoContext("myvideo", this);
		imgs.value = data.file
		videoContext.requestFullScreen({
			direction: 90
		});
		isOpenVideo.value = true
		
		setTimeout(()=>{
			videoContext.play();
		},200)

		
		// videoContext.value = uni.createVideoContext('myVideo', this)

		// videoContext.value.requestFullScreen()
		// setTimeout(()=>{videoContext.value.play()})
	}
	const fullscreenchange = (e) => {
		let fullScreen = e.detail.fullScreen;
		if (!fullScreen) {
			uni.createVideoContext("myvideo", this).pause()
			//退出全屏
			isOpenVideo.value = false; // 隐藏播放盒子
		}

	}

	let detail = reactive({
		id: '',
		title: "",
		tablist: [],
		active: 0,

		twoTypeList: [],
		twoTypeActive: 0,

		typelist: [],
		typeActive: 0
	})
	accesstypec().then(res => {
		console.log(res);

		detail.typelist = res.data
	})
	let id = ref()
	onLoad((option) => {
		id.value = option.id
		uni.setNavigationBarTitle({
			title: option.title
		})
	})

	const onTypeActive = (index) => {
		detail.typeActive = index

		paging.value.reload()
	}

	let keyword = ref('')

	const search = (e) => {
		console.log(e);
		keyword.value = e
		paging.value.reload()
	}

	const paging = ref(null)
	const dataList = ref([])

	const queryList = (pageNo, pageSize) => {
		videolists({
			pid: id.value,
			typec_id: detail.typelist.length > 0 && detail.typeActive !== 0 ? detail.typelist[detail
					.typeActive - 1]
				.id : 0,
			keyword: keyword.value
		}).then(res => {
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
</script>

<style lang="scss" scoped>
	.seach {
		padding: 20rpx 30rpx 10rpx;
	}

	.img {
		// column-count: 2;
		// column-gap: 10rpx;
		display: grid;
		gap: 10px;
		padding: 30rpx;
		box-sizing: border-box;

		&-tip {
			width: 335rpx;
			// background-color: #000;
			margin-top: 20rpx;
		}

		&-tips {
			width: 100%;
		}
	}


	.bf {
		top: 50%;
		left: 50%;
		width: 60rpx;
		height: 60rpx;
		transform: translate(-50%, -50%);
	}


	.tabs {
		margin-top: 34rpx;
	}

	.tabsItem {
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.tabsItemicon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.tabs {
		margin-top: 34rpx;
	}

	.tabsItem {
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.tabsItemicon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}
</style>